<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {

				var $smallImg = $("#smallImg"); //小图
				var $smallArea = $("#smallArea"); //小区域

				var $bigImg = $("#bigImg"); //大图
				var $bigArea = $("#bigArea"); //大区域

				var scale = $bigImg.height() / $smallImg.height(); //比例

				$smallArea.css({ //设置小区域的高度，宽度
					"width": $smallImg.width() * $bigArea.width() / $bigImg.width(),
					"height": $smallImg.height() * $bigArea.height() / $bigImg.height()
				});

				$smallImg.on("mouseenter", function() {
					$smallArea.css("display", "block"); //移入小图，小区域显示
					$bigArea.css("display", "block"); //移入小图，大区域显示

					//移动
					$(document).on("mousemove", function(evt) {
						var x = evt.pageX - $smallImg.offset().left - $smallArea.width() / 2;
						var y = evt.pageY - $smallImg.offset().top - $smallArea.height() / 2;

						//判断边界
						if(x <= 0) {
							x = 0;
						} else if(x >= $smallImg.width() - $smallArea.width()) {
							x = $smallImg.width() - $smallArea.width()
						}

						if(y <= 0) {
							y = 0;
						} else if(y >= $smallImg.height() - $smallArea.height()) {
							y = $smallImg.height() - $smallArea.height()
						}

						//设置移动时 小区域的坐标
						$smallArea.css({
							"left": x,
							"top": y
						});
						
						//设置小区域移动时大图位置
						$bigImg.css({
							"left":-x*scale,
							"top":-y*scale
						})

					});
					
					//移出小图
					$smallImg.on("mouseleave",function(){
						$smallArea.css("display", "none"); //移出小图，小区域隐藏
						$bigArea.css("display", "none"); //移出小图，大区域隐藏
					})
				})
			})
		</script>
	</head>

	<body>
		<div id="smallImg" style=" width: 200px; height: 200px; background: url(img/星际穿越.jpg); background-size: cover; position: absolute;left: 30px; top: 100px;">
			<div id="smallArea" style=" display: none; width: 50px; height: 50px; background: rgba(222,222,111, 0.3); position: absolute; left: 30px; top: 30px;"></div>
		</div>
		<div id="bigArea" style="display: none; overflow: hidden; width: 300px;height: 300px; background: rgba(222,222,111, 0.3); position: absolute; left: 250px; top: 100px;">
			<img id="bigImg" src="img/星际穿越.jpg" style="width: 800px; height: 800px; position: absolute;left: 0; top: 0;" />
		</div>

	</body>

</html>